<template>
  <div class="app-container home" style="padding: 0">
    <!-- 我是 场馆 -->
    <div class="banner">
      <el-carousel height="350px">
        <el-carousel-item>
          <img src="/img/cg_banner.jpg"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="box">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="tabClick">
        <el-tab-pane v-for="(t, index) in typeList" :key="index" :label="t.name" :name="t.id">
        </el-tab-pane>
      </el-tabs>

      <el-row :gutter="20" class="pt-20">
        <el-col v-for="n in list" :span="8" class="venueItem" @click="viewDetail(n)">
          <el-card shadow="never" :body-style="{ padding: '0px' }">
            <div class="imgbox">
              <img :src="n.venueLogo" class="image">
              <div class="hoverShow">
                <p>
                  <span>营业中</span>
                  {{n.businessPeriod?.replace(/,/,'-')}}</p>
                <a>场馆详情></a>
              </div>
            </div>
            <div>
              <h3 title="n.venueName">{{ n.venueName }}</h3>
              <div class="bottom">
                <!--<el-tag class="mr-10" v-if="n.invoiceFlag=='1'" effect="plain" type="warning">发票</el-tag>-->
                <el-tag class="mr-10" v-if="n.marketFlag=='1'" effect="plain" type="warning">超市</el-tag>
                <el-tag class="mr-10" v-if="n.parkFlag=='1'" effect="plain" type="warning">免费停车</el-tag>
                <el-tag class="mr-10" v-if="n.wifiFlag=='1'" effect="plain" type="warning">WIFI</el-tag>
                <el-tag class="mr-10" v-if="n.trainFlag=='1'" effect="plain" type="warning">培训</el-tag>
                <el-tag class="mr-10" v-if="n.showerFlag=='1'" effect="plain" type="warning">淋浴</el-tag>
                <el-tag class="mr-10" v-if="n.individualTouristFlag=='1'" effect="plain" type="warning">散客</el-tag>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-pagination layout="prev, pager, next" :total="50" :hide-on-single-page="true" />

    </div>
    <venueDetail ref="diaVenueDetailRef"/>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import  * as match from "@/api/match/pc"
import venueDetail from './components/diaVenueDetail'
const router = useRouter()
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
const { proxy } = getCurrentInstance()
const typeList = ref([{ name: '全部', id: '0' }])
const list = ref([1, 1, 1, 1, 1, 1, 1, 1])
const activeName = ref('')
const query = ref({})
onMounted(() => {
  getProjectList()
  getList()
  activeName.value = typeList.value[0].id
})
function getList(){
  match.getVenueList(query.value).then(res=>{
    list.value = res.data.rows
  })
}
function getProjectList() {
  match.projectConfigList().then(res => {
    typeList.value = res.rows
    let obj = {
      id: '',
      name: '全部'
    }
    typeList.value.unshift(obj)
  })
}
function tabClick(tab, event) {
  console.log(tab, event)
  query.value.projectId = tab
}
function viewDetail(n) {
  proxy.$refs['diaVenueDetailRef'].open({
    title: n.venueName,
    id: n.id
  })
}
</script>

<style scoped lang="scss">
		.el-pagination{justify-content: center;}
	  .demo-tabs{margin: 20px 0 0}
</style>
